<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
</head>
<body>
<div class="layui-tab page-content-wrap">
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form"  style="width: 90%;padding-top: 20px;">
                {% csrf_token %}
                <div class="layui-form-item">
                    <label class="layui-form-label">班次船名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="name" placeholder="班次船名" autocomplete="off" class="layui-input" value={{ name }} readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">代理商：</label>
                    <div class="layui-input-block">
                        <input type="text" name="agen_name" lay-verify="agen_name" placeholder="代理商名" autocomplete="off" class="layui-input" value={{ agen_name }} readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格(元)：</label>
                    <div class="layui-input-block">
                        <input type="text" name="price"  lay-verify="price" placeholder="价格(元)" autocomplete="off" class="layui-input" value=成人：¥&ensp;{{ price }}&emsp;儿童：¥&ensp;0 readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开船班次：</label>
                    <div class="layui-input-block">
                        <!-- 点击这个div，就可以显示一个日期表，然后进行时间点选择 -->
                        <input type="text" name="departure_time"  lay-verify="departure_time" class="layui-input" placeholder="请选择开船时间" value={{ departure_time }} readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">航行时长：</label>
                    <div class="layui-input-block">
                        <input type="text" name="duration" lay-verify="duration" placeholder="预计航行时长(分钟)" autocomplete="off" class="layui-input" value={{ duration }} readonly>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">游览日期：</label>
                    <div class="layui-input-block">
                        <!-- 点击这个div，就可以显示一个日期表，然后进行时间点选择 -->
                        <input type="date" name="tour_date"  lay-verify="tour_date" class="layui-input" placeholder="请选择游览日期" value="{{ date }}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">游览班次：</label>
                    <div class="layui-input-block">
                        <select id="text1" lay-verify="Pname" class="layui-input">
                            <option value="">请点击后选择</option>
                            {% for m,k in ban_type.items %}
                            <option value={{ m }}>{{ k }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="yk_name" lay-verify="yk_name" placeholder="请填写姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">性别：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="1" title="男" checked="">
                        <input type="radio" name="sex" value="0" title="女">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">身份证：</label>
                    <div class="layui-input-block">
                        <input type="text" name="id_card" lay-verify="id_card" placeholder="请填写身份证号" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">籍贯：</label>
                    <div class="layui-input-block">
                        <input type="text" name="origin" lay-verify="origin" placeholder="请填写籍贯" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="adminInfo" style="margin-top: 30px">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/js/jquery.cookie.js"></script>
<script src="../../static/js/xm-select.js"></script>
<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>

<script>
    layui.use(['form','element'], function() {
        var form = layui.form()
        re_url = "{{url_data|safe}}";

        form.verify({
            tour_date: function(value){
                if(value.length < 1){
                    return '请选择游览日期！';
                }
            }
            ,Pname: function(value){
                if(value.length < 1){
                    return '请选择游览班次';
                }
            }
            ,yk_name: function(value){
                if(value.length < 1){
                    return '请填写游客姓名';
                }
            },
            id_card: function(value){
                if(value.length < 1){
                    return '请填写身份证号';
                }
            },
            origin: function(value){
                if(value.length < 1){
                    return '请填写籍贯';
                }
            }
        });

        form.on('submit(adminInfo)', function(data){
            var index = layer.load(2, {shade: [0.2, '#5B5B5B']});
            // 获取 id 的值
            var ID = {{ id }};

            var P_m_id=$("#text1 option:selected").val();

            $.ajax({
                url: 'buy_tickets.html',
                type: 'POST',
                data:{'key': 'ticket_edit','ID':ID,'base':data.field,'type':re_url,'ban_type': P_m_id},
                headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                success: function (base) {
                    if (base == 'true'){
                        layer.msg('购票成功！', {icon: 1});
                        //下面为跳出iframe框架的页面跳转
                        setTimeout("window.parent.location.reload();", 2000 )
                    }else if (JSON.parse(base) == 'ex_ticket') {
                        layer.close(index);
                        layer.msg('一人限购一张！', {icon: 2});
                    }else if (JSON.parse(base) == 'error_end_time') {
                        layer.close(index);
                        layer.msg('游览日期必须选择当前日期或之后！', {icon: 2});
                    }else if (JSON.parse(base) == 'error') {
                        layer.close(index);
                        layer.msg('未知错误！请联系管理员', {icon: 2});
                    }else if (JSON.parse(base) == 'partition_error') {
                        layer.close(index);
                        layer.msg('数据库分区错误！请联系管理员', {icon: 2});
                    }else if (JSON.parse(base) == 'error_date') {
                        layer.close(index);
                        layer.msg('仅限预订未来15天内的船票', {icon: 2});
                    }
                }
            })
            return false;
        })
    })
</script>
</body>
</html>